<html>
    <head>
        <title>3D立方体</title>
        <meta charset="UTF-8">
        <style>
            body{
                background-color: black;
                height: 100%;
                /*弹性元素*/
                display: flex;
                /*水平*/
                justify-content: center;
                /*竖直*/
                align-items: center;
                /*视角*/
                perspective: 1500px;
                

            }
            img
            {
                width:260px;
                height: 260px;
                /*绝对定位*/
                position: absolute;

        
            }
            main{
                width:260px;
                height: 260px;
                /*子元素是否变形，当父元素3d变形，子元素也变形*/
                transform-style: preserve-3d;
                /*动画-名字-10s-匀速*/
                animation: spin 15s linear;
                /*动画次数，无穷一直转*/
                animation-iteration-count: infinite;

            }
            /*main:nth-child(2)
            {
                width: 50px;
                height: 50px;
                left:-300px;
                animation: spin 5s linear;
                animation-iteration-count: infinite;
            }*/
            #top{
                /*变形-平移Y-旋转X*/
                /*scale缩放*/
                transform:translateY(-130px) rotateX(90deg);

            }
            #bottom{
                transform:translateY(130px) rotateX(90deg);
            }
            #left{
                transform:translateX(-130px) rotateY(90deg);
            }
            #right{
                transform:translateX(130px) rotateY(90deg);
            }
            #front{
                transform:translateZ(-130px);
            }
            #back{
                transform:translateZ(130px);
            }
           
            /*创建动画，创建css动画*/
            @keyframes spin{
                0%{
                    transform: rotateY(0deg)roteteX(0);
                }
                100%{
                    transform: rotateY(720deg)rotateX(360deg);
                }
            }


        </style>
    </head>
    <body>
        <main>
            <img src="a.jpeg" id="top">
            <img src="b.jpeg" id="bottom">
            <img src="c.jpg" id="left">
            <img src="g.jpeg" id="right">
            <img src="e.jpg" id="front">
            <img src="f.jpeg" id="back">
            <!--<img src="" alt="">-->
            <!--正常显示是crc，不正常显示alt-->
            <!--img[src=$.jpg]*6顺序排序-->
        </main>
        <!--<main>
            <img src="a.jpeg" id="top">
            <img src="b.jpeg" id="bottom">
            <img src="c.jpg" id="left">
            <img src="g.jpeg" id="right">
            <img src="e.jpg" id="front">
            <img src="f.jpeg" id="back">
        
        </main>
        -->
    </body>
</html>